<template>
	<view>
		<map class="map"></map>
		<form @submit="handleSubmit">
			<view class="cu-form-group margin-top">
				<view class="title">
					<text class="cuIcon-friendfill"></text>
				</view>
				<input name="name" value="张三丰" class="text-right" placeholder="请输入姓名"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">
					<text class="cuIcon-mobilefill"></text>
				</view>
				<input name="phone" value="13988885555" class="text-right" placeholder="请输入电话"></input>
			</view>
			<view class="cu-form-group flex justify-between">
				<view class="title">
					<text class="cuIcon-locationfill"></text>
				</view>
				<view class="margin-right-sm" @tap="show=true">
					<text v-if="city">{{city}},{{district}}</text>
					<text v-else>请选择区域</text>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">
					<text class="cuIcon-locationfill"></text>
				</view>
				<input name="region" value="大西洋国际" class="text-right" placeholder="请输入详细地址"></input>
			</view>
			<view class="padding">
				<button form-type="submit" class="cu-btn bg-brown block">
					确定
				</button>
			</view>
		</form>
		<u-picker
			:show="show" 
			ref="uPicker" 
			:columns="columns" 
			@confirm="confirm" 
			@change="changeHandler"
			@cancel="show=false"
		>
		</u-picker>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				columns: [
					['重庆市', '上海市','北京市'],
					['九龙坡', '渝中区']
				],
				columnData: [
					['九龙坡', '渝中区'],
					['黄浦区', '金山区', '浦东区'],
					['朝阳区', '东城区']
				],
				city:'',
				district:''
			}
		},
		computed: {
			...mapState({
				userInfo:state=>state.user.userInfo
			})
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				let [city,district] = e.value
				console.log(city,district);
				this.city = city
				this.district = district
				this.show = false
			},
			handleSubmit(ev){
				console.log(ev);
				let {value} = ev.detail
				value.city = this.city
				value.district = this.district
				value.userid = this.userInfo.objectId
				this.$store.dispatch('address/addressAddAct',value)
			}
		}
	}
</script>

<style lang="scss">
.map{
	height: 400upx;
	width: 100%;
}
.fr{
	float: right !important;
}
</style>
